import React, { useRef, useState } from "react";
import { Button, Upload, Modal } from "antd";
import { UploadOutlined, ScissorOutlined, InboxOutlined, DeleteOutlined } from "@ant-design/icons";
import { UploadChangeParam } from "antd/lib/upload";
import { RcFile, UploadFile } from "antd/lib/upload/interface";
import Cropper from "react-cropper";
import "./index.scss";
import "cropperjs/dist/cropper.css"

interface IVImageProcessProps {
    value: string;
    onChange: (value: any) => void;
    [key: string]: any;
}
const VImageProcess: React.FC<IVImageProcessProps> = (props) => {
    const { value } = props;
    const [ modalVisible, setModalVisible ] = useState<boolean>(false);
    const [ submitting, setSubmitting ] = useState<boolean>(false)
    const cropperRef = useRef<HTMLImageElement>(null);
    const handleFileToUrl = (file: RcFile) => {
        const filereader = new FileReader();
        filereader.onload = e => {
            const src = e.target?.result;
            props.onChange(src);
      };
      filereader.readAsDataURL(file);
    }

    const handleFileUpload = (info: UploadChangeParam<UploadFile<any>>) => {
        // TODO执行图片上传...
    }
    const handleSubmit = () => {
        // TODO: 这里可以尝试修改上传图片的尺寸
        const imageElement: any = cropperRef?.current;
        const cropper: any = imageElement?.cropper;
        props.onChange(cropper.getCroppedCanvas().toDataURL())
        setModalVisible(false);
        setSubmitting(false)
    }
    return <>
        {
            value ? (<div className="v-image-process-wrapper">
                <div className="image-wrapper">
                    <img src={value} alt="NONE" />
                </div>
                <div className="operate-btn-group">
                    <Upload 
                        showUploadList={false}
                        beforeUpload={(file) => handleFileToUrl(file)}
                        onChange={(info) => handleFileUpload(info)}
                    >
                        <Button icon={<UploadOutlined />}>更换图片</Button>
                    </Upload>
                    <Button icon={<ScissorOutlined />} onClick={() => setModalVisible(!modalVisible)}>裁剪图片</Button>
                    { props?.showDelete && (<Button type="primary" danger onClick={() => props.onChange("")}><DeleteOutlined />删除图片</Button>)}
                </div>
                <Modal
                    title="图片裁剪"
                    visible={modalVisible}
                    okText="确认"
                    cancelText="取消"
                    onOk={handleSubmit}
                    onCancel={() => setModalVisible(false)}
                    okButtonProps={{
                        loading: submitting
                    }}
                >
                <Cropper
                    src={value}
                    style={{ width: "300", height: "200" }}
                    className="company-logo-cropper"
                    ref={cropperRef}
                    viewMode={1}
                    zoomable={false}
                    aspectRatio={1}
                    guides={false}
                />
                </Modal>
            </div>) : (<Upload.Dragger beforeUpload={(file) => handleFileToUrl(file)} showUploadList={false}>
                <p className="ant-upload-drag-icon">
                    <InboxOutlined />
                </p>
                <p className="ant-upload-hint">
                    选择上传页面背景图片
                </p>
            </Upload.Dragger>)
        }
    </>
}


export default VImageProcess;